<template>
    <div class="package-goods" @click.stop>
        <div class="package-info">
            <div class="gift-info">
                <span class="gift-tag">套餐</span>
                <span class="gift-brief">内含{{goodsCount}}个商品</span>
                <span class="gift-discount">(已省<span class="gift-discount-amount">￥{{discountAmount}}</span>)</span>
            </div>
            <div class="operate" @click.stop="collapseToggle">
                {{operateText}}
                <i class="iconfont icon-zhixiang" :class="{'collapse': collapse}"></i>
            </div>
        </div>
        <div class="package-list" :style="{'height': contentHeight}">
            <div class="package-wrapper" ref="content">
                <div v-show="goodsList.length">
                    <goods-info
                        v-for="goods in goodsList"
                        :key="goods.id"
                        :goodsInfo="goods"
                    ></goods-info>
                </div>
                <div v-show="!goodsList.length">
                    <div class="package-loading">
                        <van-loading size="24px">加载中...</van-loading>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { request } from "@xiaoe/js-tools/lib/request";
import { Loading } from "vant";

import GoodsInfo from "./GoosInfo";
export default {
    name: "GoodsPackage",
    props: {
        goodsCount: Number,
        resource_id: '',
        resource_type: Number,
        discountAmount: String
    },
    data() {
        return {
            collapse: true,
            goodsList: [],
            goodsDomUpdated: false
        };
    },
    computed: {
        operateText() {
            return this.collapse ? '点击展开' : '收起'
        },
        contentHeight() {
            this.goodsDomUpdated; // 添加套餐商品dom响应式监听
            return !this.collapse ? this.$refs.content.clientHeight + 'px' : 0;
        },
    },
    watch: {
        'goodsList': function() {
            this.$nextTick(() => {
                this.goodsDomUpdated = true;
            })
        }
    },
    components: {
        GoodsInfo,
        [Loading.name]: Loading
    },
    methods: {
        collapseToggle() {
            if (this.collapse && !this.goodsList.length) {
                this.getGoodsPackage();
            }
            this.collapse = !this.collapse;
        },
        getGoodsPackage() {
            request({
                url: '/marketing/get_package_goods_list',
                params: {
                    resource_id: this.resource_id,
                    resource_type: this.resource_type
                }
            }).then(({ code, data }) => {
                if (code === 0) {
                    this.goodsList = data.goods_list || [];
                }
                return code;
            })
        }
    },
};
</script>

<style lang="scss" scoped>
.package-goods{
    margin-top: 0.2rem;
}

.package-info {
    display: flex;
    justify-content: space-between;
}

.package-loading {
    padding: .24rem;
}

.package-list {
    overflow: hidden;
    transition: height .5s;
}

.icon-zhixiang {
    display: inline-block;
    transform: rotate(-90deg);

    &.collapse {
        transform: rotate(90deg);
    }

    transition: transform .3s;
}

.package-wrapper {
    margin-top: .1rem;
}

.operate {
    color: #666;
    font-size: .24rem;
}

.gift-tag {
    font-size: 0.28rem;
    font-weight: 500;
}
.gift-brief {
    margin-left: 0.16rem;
    color: #999;
    font-size: 0.24rem;
}
.gift-discount {
    font-size: 0.24rem;
}
.gift-discount-amount {
    color: #ff5429;
}
</style>